<template>
	<view class="main-wrap">
		<view class="fixed-screen">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="goodsName" :adjust-position="false" type="text" placeholder="输入您要搜索的商品名称" @confirm="search" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @tap="search">搜索</button>
				</view>
			</view>
			<view class="search-bar">
				<view class="bar-item" v-for="(item, index) in searchBar" :key="index" @click="changeSearchStatus(index)">
					<text>{{item.title}}</text>
					<view class="bar-item-icons">
						<i class="arrows arrows-up" :class="{'active-up': item.status === 1}"></i>
						<i class="arrows arrows-down" :class="{'active-down': item.status === 2}"></i>
					</view>
				</view>
				<view class="bar-item"  @tap="showModal" data-target="ChooseModal">
					<text>{{activeClassifyName || '分类'}}</text>
				</view>
			</view>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
				<image class="goods-img" :src="baseUrl + item.thumbnail"></image>
				<view class="goods-detail">
					<text class="title">{{item.name}}</text>
					<view class="price-re">
						<text class="original-price invalid">￥{{item.skuList[0].originalPrice}}</text>
						<text class="discount-price">￥{{item.skuList[0].discountPrice}}</text>
						<view>
							<text>库存</text>
							<text>{{getRepertory(item.skuList)}}</text>
						</view>
					</view>
					<view class="tool-bar">
						<!-- <view class="bar-item">
							<text class="icon cuIcon-attention text-gray"></text>
							<text class="text-gray">预览</text>
						</view> -->
						<view class="bar-item" @tap.stop="goForm(item._id)">
							<text class="icon cuIcon-edit text-gray"></text>
							<text class="text-gray">编辑</text>
						</view>
					</view>
				</view>
			</view>
		</view> 
		<view class="bg-gradual-green add-icon" @tap.stop="goForm()">
			<uni-icons type="plusempty" color="#FFF" size="40" class="icon"></uni-icons>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="searchByClassify">确定</view>
				</view>
				<view class="grid col-3 padding-sm">
					<view v-for="(item,index) in classifyList" class="padding-xs" :key="index">
						<button class="cu-btn green lg block" :class="item.checked?'bg-green':'line-green'" @tap="chooseCheckbox"
						 :data-value="item._id"> {{item.name}}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import goodsApi from '@/api/goods.js'
	import config from '@/config.js';
	export default{
		name: 'goods',
		data() {
			return {
				modalName: null,
				goodsName: '',
				classifyList: [],
				activeClassify: '',
				activeClassifyName: '',
				searchBar: [
					{
						title: '添加时间',
						key: 'createDate',
						status: 0,
					},
					{
						title: '销量',
						key: 'saleVolume',
						status: 0
					},
					{
						title: '库存',
						key: 'repertory',
						status: 0
					}
				],
				goodsList: [],
				baseUrl: config.network.imageUrl
			}
		},
		onLoad() {
			uni.$on('resetList', () => {
				this.selectData();
			})
		},
		created() {
			this.selectData();
			this.initClassify();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			initClassify() {
				goodsApi.getClassify().then(res => {
					this.classifyList = res.data.data.map(item => ({
						...item,
						checked: false
					}));
				});
			},
			chooseCheckbox(e) {
				let items = this.classifyList;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i]._id == values) {
						items[i].checked = !items[i].checked;
					} else {
						items[i].checked = false;
					}
				}
			},
			searchByClassify() {
			   this.hideModal();
			   const result = this.classifyList.filter(item => item.checked);
			   if (result.length > 0) {
				   this.activeClassify = result[0].code;
				   this.activeClassifyName = result[0].name;
			   } else {
				   this.activeClassify = '';
				   this.activeClassifyName = '';
			   }
			   this.selectData();
			},
			hideModal(e) {
				this.modalName = null
			},
			search() {
				this.selectData();
			},
			async selectData() {
				const sort = this.searchBar.filter(item => item.status > 0);
				let sortStr = '';
				sort.forEach(item => {
					sortStr += `&${item.key}=${item.status}`
				}) 
				const res = await goodsApi.find({name: this.goodsName, sortStr, classify: this.activeClassify});
				this.goodsList = res.data.data;
			},
			getRepertory(skuList) {
				let count = 0;
				skuList.forEach(item => count += item.repertory);
				return count;
			},
			goForm(id) {
				uni.navigateTo({
					url: `./form?id=${id}`
				});
			},
			changeSearchStatus(index) {
				this.searchBar.forEach((item, i) => {
					if (index !== i) {
						item.status = 0;
					}
				})
				const bar = this.searchBar[index];
				if (bar.status === 2) {
					bar.status = 0;
				} else {
					bar.status++;
				}
				this.selectData();
			}
		}
	}
</script>
<style lang="less" scoped>
	.fixed-screen{
		position: fixed;
		/* #ifdef APP-PLUS */
		top: 0px;
		/* #endif */
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		left: 0px;
		width: 100%;
		z-index: 1;
	}
	.action-icon{
		font-size: 25px !important;
		font-weight: 700;
	}
	.search-bar{
		display: flex;
		padding: 10px 30rpx;
		background-color: #FFF;
		.flex-end{
			justify-content: flex-end;
		}
		.con-center{
			flex: 1;
			justify-content: center;
		}
		.bar-item:nth-child(2),.bar-item:nth-child(3){
			flex: 1;
			justify-content: center;
		}
		.bar-item{
			display: flex;
			align-items: center;
			.bar-item-icons{
				margin-left: 20rpx;
				.arrows{
					display: block;
					width: 0px;
					height: 0px;
				}
				.arrows-up{
					border-top: 5px solid #FFF;
					border-right: 5px solid #FFF;
					border-bottom: 5px solid #CACAD1;
					border-left: 5px solid #FFF;
					margin-bottom: 2px;
				}
				.arrows-down{
					border-top: 5px solid #CACAD1;
					border-right: 5px solid #FFF;
					border-bottom: 5px solid #FFF;
					border-left: 5px solid #FFF;
					margin-top: 2px;
				}
				.active-up{
					border-bottom: 5px solid #39b54a;
				}
				.active-down{
					border-top: 5px solid #39b54a;
				}
			}
		}
	}
	.goods-list{
		margin-top: 200rpx;
		padding-bottom: 120rpx;
		.goods-item{
			display: flex;
			background-color: #FFF;
			margin-top: 15px;
			background-color: #FFF;
			padding: 10px 30rpx;
			.goods-img{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.goods-detail{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 15px;
				.title{
					
				}
				.price-re{
					display: flex;
					.invalid{
						text-decoration-line: line-through;
					}
					.discount-price{
						padding: 0px 10px;
					}
				}
				.tool-bar{
					display: flex;
					.bar-item{
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
						.icon{
							font-size: 40rpx;
						}
					}
				}
			}
		}
	}
	.add-icon{
		position: fixed;
		bottom: 100px;
		right: 10px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		color: #FFF;
		text-align: center;
		line-height: 50px;
		.icon{
			color: #FFF;
		}
	}
</style>